<template>
  <el-row id="measure-manage-container">

    <el-row v-if="!isViewShow" class="permission">
      没有权限!
    </el-row>
    <el-card v-else class="box-card">

      <div slot="header" class="clearfix">
        <span>计量器具管理</span>
       <!-- <el-button style="float: right; padding: 6px 6px" type="primary">上传<i class="el-icon-upload el-icon&#45;&#45;right"></i></el-button>-->
        <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;margin-right: 10px" type="primary" @click="editMeasure">添加<i class="el-icon-plus el-icon--right"></i></el-button>
      </div>
      <el-table
        :data="tableData"
        stripe
        border
        style="width: 100%;"
        max-height="684">
        <el-table-column
          align="center"
          prop="name"
          label="计量器具名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="category"
          label="计量器具分类">
        </el-table-column>
        <el-table-column
          align="center"
          prop="level"
          :formatter="levelFormatter"
          label="器具等级">
        </el-table-column>
        <el-table-column
          align="center"
          prop="correlationParameter"
          label="计量相关参数">
        </el-table-column>
        <el-table-column
          align="center"
          prop="specification"
          label="型号规格">
        </el-table-column>
        <el-table-column
          align="center"
          prop="accuracyClass"
          label="准确度等级">
        </el-table-column>
        <el-table-column
          align="center"
          prop="measurementRange"
          label="测量范围">
        </el-table-column>
        <el-table-column
          align="center"
          prop="managerNumber"
          label="管理编号">
        </el-table-column>
        <el-table-column
          align="center"
          prop="state"
          :formatter="statusFormatter"
          label="目前状态">
        </el-table-column>
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button
              :disabled="!isViewEdit"
              size="mini"
              @click="handleInfo(scope.$index, scope.row)">详情</el-button>
            <el-button
              :disabled="!isViewEdit"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <!--分页-->
      <div style="text-align: center;margin-top: 10px;">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="paginationCount"
          :current-page="currentPage"
          :page-size="pageSize"
          @current-change="currentChange">
        </el-pagination>
      </div>

    </el-card>

    <!--弹窗-->
    <el-dialog :visible.sync="addDialogShow">

      <el-row slot="title">
        <span style="font-size: 18px">添加/编辑/详情</span>
        <el-button v-show="!isShowSubmit" @click="editHandler" style="padding: 6px 6px;margin-left: 1140px" type="primary">编辑<i class="el-icon-edit el-icon--right"></i></el-button>
        <el-button v-show="isShowSubmit"  @click="addHandler"  style="margin-left: 1144px; padding: 6px 10px"type="primary"  :loading="false">提交</el-button>
      </el-row>

      <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="140px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="计量器具名称" prop="name">
              <el-input :disabled="forbidden" v-model="ruleForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量器具类型" prop="category">
              <el-input :disabled="forbidden" v-model="ruleForm.category"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计量器具等级" prop="level">
             <!-- <el-input v-model="ruleForm.level"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.level" placeholder="请选择">
                <el-option
                  v-for="item in levelFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="数据组合编码" prop="dataCombinationCode">
              <el-input :disabled="forbidden" v-model="ruleForm.dataCombinationCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计算关系">
             <!-- <el-input v-model="ruleForm.calculableRelationship"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.calculableRelationship" placeholder="请选择">
                <el-option
                  v-for="item in calculableFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="计算系数">
             <!-- <el-input v-model="ruleForm.computingCoefficients"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.computingCoefficients" placeholder="请选择">
                <el-option
                  v-for="item in computingFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="计量相关参数" prop="">
              <el-input :disabled="forbidden" v-model="ruleForm.correlationParameter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="精度等级" prop="accuracyClass">
              <el-input :disabled="forbidden" v-model="ruleForm.accuracyClass"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="型号规格" prop="specification">
              <el-input :disabled="forbidden" v-model="ruleForm.specification"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="测量范围" prop="measurementRange">
              <el-input :disabled="forbidden" v-model="ruleForm.measurementRange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理编号" prop="managerNumber">
              <el-input :disabled="forbidden" v-model="ruleForm.managerNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校准状态">
            <!--  <el-input v-model="ruleForm.calibrationStatus"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.calibrationStatus" placeholder="请选择">
                <el-option
                  v-for="item in calibrationFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="校准周期" prop="">
              <el-input :disabled="forbidden" v-model="ruleForm.calibrationCycle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="校准时间">
              <!--<el-input v-model="ruleForm.calibrationTime"></el-input>-->
              <el-date-picker
                :disabled="forbidden"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="ruleForm.calibrationTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="检验机构">
              <el-input :disabled="forbidden" v-model="ruleForm.inspectionOrganization"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="下次校准时间" prop="">
             <!-- <el-input v-model="ruleForm.nextCalibrationTime"></el-input>-->
              <el-date-picker
                :disabled="forbidden"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="ruleForm.nextCalibrationTime"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="未校准原因">
              <el-input :disabled="forbidden" v-model="ruleForm.reason"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装地点">
              <el-input :disabled="forbidden" v-model="ruleForm.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="安装方" prop="">
             <!-- <el-input v-model="ruleForm.installer"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.installer" placeholder="请选择">
                <el-option
                  v-for="item in installerFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="安装时间">
              <!--<el-input v-model="ruleForm.installTime"></el-input>-->
              <el-date-picker
                :disabled="forbidden"
                v-model="ruleForm.installTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接入系统">
             <!-- <el-input v-model="ruleForm.accessSystem"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.accessSystem" placeholder="请选择">
                <el-option
                  v-for="item in accessFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="生产厂家" prop="">
              <el-input :disabled="forbidden" v-model="ruleForm.manufacturer"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目前状态" prop="state">
             <!-- <el-input v-model="ruleForm.state"></el-input>-->
              <el-select :disabled="forbidden" v-model="ruleForm.state" placeholder="请选择">
                <el-option
                  v-for="item in stateFields"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态发生时间">
            <!--  <el-input v-model="ruleForm.stateOccurrenceTime"></el-input>-->
              <el-date-picker
                :disabled="forbidden"
                v-model="ruleForm.stateOccurrenceTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row type="flex" class="mmc-submit-layout" v-show="isShowBottom">

          <el-button @click="cancelSubmit">取消</el-button>
          <el-button @click="submitHandler" type="primary">确定</el-button>

        </el-row>

      </el-form>


    </el-dialog>
  </el-row>
</template>

<script>
    export default {
        name: "index",
        data(){
            return {
              isViewShow: false,
              isViewEdit: false,
              showType:1,
              isShowSubmit: false,
              isShowBottom: false,
              paginationCount: 12,
              currentPage:1,
              pageSize:12,
              addDialogShow:false,
              forbidden:true,
              tableData: [],
              ruleForm:{
                id: "",
                name: "",
                category: "",
                level: '',
                dataCombinationCode: "",
                calculableRelationship: "",
                computingCoefficients: '',
                manufacturer: "",
                correlationParameter: "",
                accuracyClass: "",
                specification: "",
                measurementRange: "",
                managerNumber: "",
                calibrationStatus: "",
                calibrationCycle: "",
                calibrationTime: "",
                inspectionOrganization: "",
                nextCalibrationTime: "",
                reason: "",
                address: "",
                installer: "",
                installTime: "",
                accessSystem: "",
                state: '',
                stateOccurrenceTime: ""
              },
              rules:{
                name:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                category:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                level:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                dataCombinationCode:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                accuracyClass:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                specification:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                measurementRange:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                managerNumber:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
                state:[
                  { required: true, message: '请输入', trigger: 'blur' },
                ],
              },
              levelFields:[{value: 1,label: '进出用能计量器具'},{value: 2,label: '主要次级用能计量器具'},{value: 3,label: '主要用能设备计量器具'}],
              calculableFields:[{value: 1,label: '加'},{value: 2,label: '减'},{value: 3,label: '乘'},{value: 4,label: '除'}],
              computingFields:[{value: 1,label: '全部'},{value: 0.5,label: '与组合编码数值相关'}],
              calibrationFields:[{value: 1,label: '合格'},{value: 0,label: '不合格'}],
              installerFields:[{value: 1,label: '用能单位'},{value: 2,label: '能源供应公司'},{value: 3,label: '第三方公司'}],
              accessFields:[{value: 1,label: '自身管理系统'},{value: 2,label: '能源供应公司系统'}],
              stateFields:[{value: 1,label: '正常'},{value: 2,label: '故障'},{value: 3,label: '停用'}],
            }
        },
      created() {
        this.$emit('fixHeadIndex', "4")
      },
      mounted(){
        let obj = this.validateGlobal.getPermission(7)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit
        this.askLists()
      },
      methods: {
        levelFormatter(row, column) {
          let level = row.level;
          if(level === 1){
            return '进出用能计量器具'
          }
          if(level === 2){
            return '主要次级用能计量器具'
          }
          if(level === 3){
            return '主要用能设备计量器具'
          }
        },
        statusFormatter(row, column) {
          let status = row.state;
          if(status === 1){
            return '正常'
          }
          if(status === 2){
            return '故障'
          }
          if(status === 3){
            return '停用'
          }
        },
        editMeasure(){        // 新增
          this.showType = 1
          this.addDialogShow = true
          this.isShowSubmit = true
          this.isShowBottom = false
          this.forbidden = false

          this.resetForm()
        },
        handleInfo(index, row) {    // 詳情
          console.log(index, row);
          this.showType = 2
          this.addDialogShow = true
          this.isShowSubmit = false
          this.isShowBottom = false
          this.forbidden = true

          this.resetForm()
          this.askInfo(row)
        },
        editHandler(index, row) {  // 編輯
          console.log(index, row);
          this.showType = 3
          this.addDialogShow = true
          this.isShowSubmit = false
          this.isShowBottom = true
          this.forbidden = false
        },
        cancelSubmit(){   // 取消編輯-》詳情
          this.showType = 2
          this.addDialogShow = true
          this.isShowSubmit = false
          this.isShowBottom = false
          this.forbidden = true
        },
        submitHandler(){  // 提交編輯
          let _that = this
          _that.askAddOrEdit()
        },
        addHandler(){     // 提交新增
          let _that = this
          _that.askAddOrEdit()
        },
        handleDelete(index, row) {
          console.log(index, row);
          this.askDelete(row)
        },
        currentChange(currentPage){  // 切换分页
          this.currentPage = currentPage;
          this.askLists()
        },
        resetForm: function(){   // 表单重置
          if (this.$refs['ruleForm']!==undefined) {
            this.$refs['ruleForm'].resetFields();
          }
          this.ruleForm.id = ''
        },
        askAddOrEdit:function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.measureManage.add + "?userId=" + userId
          let askData = _that.ruleForm
          this.http.post(url,askData, res => {
            console.log("MeasureEdit",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('提交成功!');
              _that.isShowBottom = false
              _that.showType = 1
              _that.isShowSubmit = false
              _that.addDialogShow = false
              _that.askLists()
            }else{
              _that.$message('提交失败!');
            }
          })
        },
        askLists: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.measureManage.query
          let askData = {
            userId: userId,
            current:_that.currentPage,
            size: _that.pageSize
          }
          this.http.get(url,askData, res => {
            console.log("MeasureLists",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.tableData = res.data.records
              _that.paginationCount =res.data.total
            }else{
              _that.$message('列表获取失败!');
            }
          })
        },
        askDelete: function (row) {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.measureManage.delete
          let askData = {
            userId: userId,
            measuringInstrumentId:row.id,
          }
          this.http.get(url,askData, res => {
            console.log("MeasureDelelte",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('删除成功!');
              _that.askLists()
            }else{
              _that.$message('删除失败!');
            }
          })
        },
        askInfo(row) {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.measureManage.info
          let askData = {
            userId: userId,
            measuringInstrumentId:row.id,
          }
          this.http.get(url,askData, res => {
            console.log("MeasureInfo",res)
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.ruleForm = res.data
            }else{
              _that.$message('获取详情失败!');
            }
          })
        }
      }
    }
</script>

<style lang="scss">

  #measure-manage-container {

   > .el-card{
      margin: 20px 20px 0 20px;
      height: 820px;
    }

    .el-dialog{
      height: 660px;
      width: 1400px;
    }

    .mmc-submit-layout{
      justify-content: center;
    }
    .el-select{
      width: 312px;
    }
    .el-date-editor.el-input, .el-date-editor.el-input__inner {
      width: 312px;
    }
  }

</style>
